// login 登录页交互

//获取元素对象
const load = document.querySelector(".load"); //加载
const telNum = document.querySelector('input[name="telNum"]'); //手机号登录（手机号）
const authCode = document.querySelector('input[name="authCode"]'); //手机号登录（验证码）
const telAccount = document.querySelector('input[name="telAccount"]'); //账号登录账号
const telPassword = document.querySelector('input[name="telPassword"]'); //账号登录密码
const telLeft = document.querySelector(".telLeft"); //手机号登录
const telRight = document.querySelector(".telRight"); //账号登录
const accountLeft = document.querySelector(".accountLeft"); // 账号登录
const accountRight = document.querySelector(".accountRight"); //手机号登录
const telCode = document.querySelector(".telCode"); //获取验证码
const clearPass = document.querySelector(".clearPass"); //清除密码
const viewPassword = document.querySelector(".viewPassword"); //查看密码
const telLogin = document.querySelector(".telLogin"); // 控制-手机登录页（显示/隐藏）
const accountLogin = document.querySelector(".accountLogin"); // 控制-账号密码（显示/隐藏）
const numberCode = document.querySelector(".numberCode"); //登录按钮-手机号
const accountPasswordLogin = document.querySelector(".accountPasswordLogin"); // 登录按钮-账号
const telNotice = document.querySelector(".telNotice"); // 手机号登录-手机号验证报错
const validationMessage = document.querySelector(".validationMessage"); // 手机号登录-验证码报错
// ---------------

// 手机号正则验证
const telNvt = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

// 1、页面初始化load加载事件
window.onload = function () {
  const interval = setInterval(() => {
    load.classList.add("hide");
  }, 4000);
};

// 登录方式切换（显示/隐藏）
function telLoginHider() {
  // console.log(456);
  if (telLogin.classList.contains("hide")) {
    telLogin.classList.remove("hide");
    accountLogin.classList.add("hide");
  } else {
    telLogin.classList.add("hide");
    accountLogin.classList.remove("hide");
  }
}

// 处于账号密码登录页面时-点击-手机号登录处-切换
accountRight.addEventListener("touchstart", function () {
  telLoginHider();
});
// 于手机号登录页面时-点击-账号密码-切换
telRight.addEventListener("touchstart", function () {
  telLoginHider();
});

// 获取验证码
telCode.addEventListener("touchstart", function (e) {
  e.preventDefault();

  // 正则验证手机号是否正确
  const tel = document.querySelector('input[name="telNum"]');
  if (!telNvt.test(tel.value)) return;
  numberCode.style.backgroundColor = "#EF4F3F";
  telCode.style.pointerEvents = "none"; //禁用
  // telCode.style.fontSize = "0.05rem";
  let codeCount = 5;
  telCode.innerHTML = `5秒后重新获取`;
  const setTelTime = setInterval(() => {
    codeCount--;
    telCode.innerHTML = `${codeCount}秒后重新获取`;
    if (codeCount == 0) {
      clearInterval(setTelTime); //关闭定时器
      telCode.style.pointerEvents = ""; //解除禁用
      telCode.innerHTML = `获取验证`;
    }
  }, 1000);
});

// 重置密码框
clearPass.addEventListener("touchstart", () => {
  console.log(123);
  document.querySelector('input[name="telPassword"').value = "";
});

// 查看密码
viewPassword.addEventListener("touchstart", () => {
  viewPassword.classList.toggle("telShow");
  if (viewPassword.classList.contains("telShow")) {
    viewPassword.src = "./images/眼睛3.png";
    telPassword.setAttribute("type", "text");
  } else {
    viewPassword.src = "./images/眼睛_闭.png";
    telPassword.setAttribute("type", "password");
  }
});

// 表单焦点事件(手机号登录页)
telNum.addEventListener("change", function () {
  // console.log(telNum.nextElementSibling);
  // 正则验证手机号是否正确
  if (!telNvt.test(telNum.value)) {
    telNum.nextElementSibling.classList.remove("hide");
  } else {
    telNum.nextElementSibling.classList.add("hide");
  }
});
authCode.addEventListener("change", function () {
  // console.log(123);
  if (!authCode.value) {
    authCode.nextElementSibling.classList.remove("hide");
  } else {
    authCode.nextElementSibling.classList.add("hide");
  }
});

// 表单焦点事件（账号密码页）
telAccount.addEventListener("change", function () {
  // 正则验证手机号是否正确
  if (!telNvt.test(telAccount.value)) {
    telAccount.nextElementSibling.classList.remove("hide");
  } else {
    telAccount.nextElementSibling.classList.add("hide");
  }
});

telPassword.addEventListener("change", function () {
  accountPasswordLogin.style.backgroundColor = "#EF4F3F";
  telPassword.nextElementSibling.classList.remove("hide");
  if (!telPassword.value) {
  } else {
    telPassword.nextElementSibling.classList.add("hide");
  }
});

// 手机号登录验证
function accountVer() {
  tel = document.querySelector('input[name="telNum"]').value; //获取用户输入的手机号
  password = document.querySelector('input[name="authCode"]').value; //获取用户输入的验证码

  // 正则验证手机号是否正确
  if (!telNvt.test(tel)) {
    telNotice.classList.remove("hide");
  } else {
    telNotice.classList.add("hide");
  }

  // 检测验证码是否为空
  if (!password) {
    console.log(123);
    validationMessage.classList.remove("hide");
    // console.log(accountPasswordLogin);
    // accountPasswordLogin.classList.toggle("activeBtn");
  } else {
    validationMessage.classList.add("hide");
  }

  // 验证是否登录成功
  const foundUser = users.find((item) => {
    return item.tel === tel && item.captcha === password;
  });

  if (foundUser) {
    // 显示成功消息
    // alert("登录成功！");
    const userItemNameOne = document.querySelector('input[name="telNum"]');
    // const userPassword = document.querySelector('input[name="telPassword"]');
    // 判断用户输入的数据，位于数据库的具体位置
    const usersNum = users.findIndex((item) => item.tel === tel);

    const userItem = [
      {
        tel: userItemNameOne.value,
        password,
        flag: users[usersNum].flag,
        driverName: users[usersNum].driverName,
        taskCount: users[usersNum].taskCount,
      },
    ];

    localStorage.setItem("ledgerUsers", JSON.stringify(userItem)); // 本地存储
    location.href = "./我的主页.html";
  } else {
    // 显示登录失败消息
    // alert("登录失败。请检查您的用户名和密码。");
  }
}

// 登录-手机号+验证码
numberCode.addEventListener("touchstart", () => {
  accountVer();
});

// 账号密码登录验证
function passwordVer() {
  tel = document.querySelector('input[name="telAccount"]');
  password = document.querySelector('input[name="telPassword"]');

  // 正则验证手机号是否正确
  if (!telNvt.test(tel.value)) {
    tel.nextElementSibling.classList.remove("hide");
  } else {
    tel.nextElementSibling.classList.add("hide");
  }

  // 检测密码是否为空
  if (!password.value) {
    password.nextElementSibling.classList.remove("hide");
  } else {
    // password.nextElementSibling.classList.add("hide");
  }

  // 验证是否登录成功（当属性值不为空）
  const foundUser = users.find((item) => {
    return item.tel === tel.value && item.password === password.value;
  });

  if (foundUser) {
    // 显示成功消息
    // alert("登录成功！");
    const userItemNameTwo = document.querySelector('input[name="telAccount"]');
    const userPassword = document.querySelector('input[name="telPassword"]');

    // 判断用户输入的数据，位于数据库的具体位置
    const usersNumTwo = users.findIndex((item) => item.tel === userItemNameTwo.value);
    console.log(usersNumTwo);

    const userItem = [
      {
        tel: userItemNameTwo.value,
        password: userPassword.value,
        flag: users[usersNumTwo].flag,
        driverName: users[usersNumTwo].driverName,
        taskCount: users[usersNumTwo].taskCount,
      },
    ];

    localStorage.setItem("ledgerUsers", JSON.stringify(userItem)); // 本地存储
    location.href = "./我的主页.html";
  } else {
    // 显示登录失败消息
    // alert("登录失败。请检查您的用户名和密码。");
  }
}

// 登录-账号+密码
accountPasswordLogin.addEventListener("touchstart", () => {
  passwordVer();
});
